<template>
	<view class="box">
		<view class="orderwrap">
			<view class="orderitem">
				<view class="itemtop">
					<view class="name">
						<image style="width: 38rpx;height: 38rpx;border-radius: 50%;margin-right: 10rpx;"
							:src="info.shop_seller.logo" mode="aspectFill"></image> {{info.shop_seller.name}}
					</view>
				</view>
				<view class="itemcenter">
					<!-- <image src="/static/image/test.png" mode="aspectFill"></image> -->
					<image :src="info.image" mode="aspectFill"></image>
					<view class="itemcenterright">
						<view class="itemcenterrightitem">
							{{info.goods_name}}
						</view>
						<view class="itemcenterrightitem flex_ld " style="margin-top: 20rpx;" >
							<text class="textone">可退数量 {{info.num}}件</text>
							<u-number-box :min="1" :max="info.num" v-model="applynum" ></u-number-box>
							
						</view>
						<view class="itemcenterrightitem">
							￥{{info.price}}
						</view>
					</view>
				</view>
				<view class="order_sn">
					 <text>订单编号</text> <view class="orderight">
					 	 <text>{{info.order_relation.order_no}}</text> <image @click="copyordersn"  :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
					 </view>
				</view>
			</view>
			
		</view>
		<view class="imgwrap">
			<view class="tit">
				提交退货原因
			</view>
			<view class="ipt">
				<!-- #ifdef H5||MP-WEIXIN -->
				<u--textarea class="textarea" v-model="content" placeholder="请输入内容" count></u--textarea>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<u--textarea class="textarea" v-model="content" placeholder="请输入内容"></u--textarea>
				<!-- #endif -->
			</view>
			<uni-file-picker class="up" limit="5" @select="select" @success="success" @progress="progress"
				:auto-upload="true" :image-styles="imageStyles" fileMediatype="image" mode="grid"
				v-model="imageValue"></uni-file-picker>
			<view class="tip">
				注意，因质量问题提交售后申请的商品，拍照时请尽量展现出关键细节，如破损处、瑕疵点、故障点等，方便客服人员处理。最少需提交一张照片，最多可提交五张。
			</view>
		</view>

		<view class="btnwrap">
		<!-- #ifdef MP-WEIXIN -->
			<button  open-type="contact" @contact="">咨询客服</button>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view class="" style="position: relative;">
			<view class="kefu">咨询客服</view>
			<contact-button class="kefu" tnt-inst-id="Fs0_yOao" scene="SCE01350885" />
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<button  @click="goapply" >咨询客服</button>
		<!-- #endif -->
			<view class="next" @click="uploadImages()">
				下一步
			</view>
		</view>
		<u-popup :show="flag" mode="center" @close="flag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">联系客服</text>
				<view class="popup-center" @click="copywx">
					<text>客服微信：{{infos.hot_wechat}}</text>
					<image @click="copywx" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
				<view class="popup-center">
					<text>客服电话：{{infos.hot_line}}</text>
					<image @click="copytel" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
				<text class="btns" @click="flag=false">确定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseURL
	} from "../../utils/request.js"
	import {
		detailinfo,
		applyrefund
	} from "../../api/order.js"
	import {
		setting
	} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				fileList1: [],

				imageValue: [

				],
				imagelist: [],
				imageStyles: {
					width: 100,
					height: 100,

				},
				id: "",
				type: "",
				info: {
					shop_seller: {
						logo: ""
					},
					order_relation:{
						order_no:""
					}
				},
				flag: false,
				infos:{},
				content:"",
				applynum:""
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			this.gedetail()
			this.getsetting()
		},
		methods: {

			getsetting() {
				setting().then(res => {
					this.infos = res.data.hot_service
				})
			},
			
			copywx() {
				uni.setClipboardData({
					data: this.infos.hot_wechat,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			
			},
			goapply(){
				window.location.href = "https://work.weixin.qq.com/kfid/kfcc9a6800d61bdb24d"
			},
			copytel() {
			uni.makePhoneCall({
				phoneNumber:this.infos.hot_line //仅为示例
			});
				
			},
			copyordersn(){
				uni.setClipboardData({
					data: this.info.order_relation.order_no,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			gedetail() {
				detailinfo({
					id: this.id
				}).then(res => {
					this.info = res.data
					this.applynum=res.data.num
				})
			},
			select(e) {
				// this.imageValue.push({
				// 	path: e.tempFilePaths[0],
				// 	url: e.tempFilePaths[0],
				// 	name: ''
				// })
				e.tempFilePaths.forEach(filePath => {
					this.imageValue.push({
						path: filePath,
						url: filePath,
						name: ''
					});
				});
				console.log('选择文件：', e)
			},
			progress(e) {
				console(e, "上传中")
			},
			success(e) {
				console.log(e, "ssss")
				console.log('上传成功')
			},
			// up() {
			// 	const tempFilePaths = e.tempFilePaths[0];

			// },
			submit() {
				uni.navigateTo({
					url: "/pageOrder/aboutorder/applyaftersalethree"
				})
			},
			async uploadImages() {
				try {
				    // 遍历 this.imageValue 中的图片路径，逐个上传
				    for (const image of this.imageValue) {
				      await this.uploadImage(image.path);
				    }
					
						applyrefund({
						  id: this.info.order_id,
						  detail_id: this.info.id,
						  refund_type: this.type,
						  apply_money: this.info.pay_price,
						  refund_num: this.applynum,
						  remark:this.content,
						  remark_images: this.imagelist // 使用 this.imagelist 作为上传结果
						}).then(res=>{
							if(res.code==1){
								setTimeout(()=>{
									uni.redirectTo({
										url:"/pageOrder/aboutorder/aftersale"
									})
								},1000)
								
							}
							uni.$u.toast(res.msg)
						});
					
				    // 所有图片上传完成后，调用 applyrefund
				    console.log("所有图片上传完成，开始调用 applyrefund");
				   
				
				  } catch (error) {
				    console.error("上传图片时发生错误", error);
				  }
			},
			async uploadImage(imagePath) {
				
				console.log(`开始上传图片: path=${imagePath}`);

				// 将图片路径转化为 uni-app 的临时文件路径
				try {
					const imageInfo = await uni.getImageInfo({
						src: imagePath
					});
					console.log(imageInfo, "ssssssssss")
					const tempFilePath = imageInfo[1].path;
					console.log(`获取到的临时文件路径: ${tempFilePath}`);

					if (!tempFilePath) {
						console.error("获取临时文件路径失败，tempFilePath 为 undefined");
						return;
					}

					console.log(`上传图片: path=${imagePath}`);

					// 上传临时文件到服务器
					await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: baseURL + `shop/common/upload`,
							filePath: tempFilePath,
							name: 'file',
							header: {
								"ba-user-token": uni.getStorageSync("token") || ''
							},
							success: (res) => {
								console.log(res, "上传成功");
								const img = JSON.parse(res.data).data.full_url;
								if(img){
									this.imagelist.push({
										img
									});
								}
								
								console.log(this.imagelist, "--------------------");
								console.log(JSON.parse(res.data));
								resolve(res);
							},
							fail: (err) => {
								console.error("上传失败", err);
								reject(err);
							}
						});
					});
					
					console.log(`图片上传完成: path=${imagePath}`);
				} catch (error) {
					console.error("获取图片信息失败", error);
				}
			}


		}
	}
</script>
<style>
	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.btnwrap contact-button {
		width: 226rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
		z-index: 9999;
	}
	.kefu{
		width: 226rpx;
		height: 80rpx;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		border: 2rpx solid #FFC300;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFC300;
		text-align: center;
		line-height: 80rpx;
		background: #fff;
	}
</style>
<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;

	}

	.orderwrap {
		width: 750rpx;
		margin-top: 40rpx;

		.orderitem {
			width: 690rpx;
			
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;
			.itemtop {
				display: flex;

				.name {
					margin-top: 38rpx;
					width: 500rpx;
					margin-left: 24rpx;

				}

				.tag {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #F63418;
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					text-align: center;
					line-height: 42rpx;
				}

				.tag2 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 42rpx;
				}
			}

			.itemcenter {
				// height: 140rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
				display: flex;

				>image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.itemcenterright {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.itemcenterrightitem {
						// margin-top: 10rpx;
						width: 450rpx;
						// margin-top: 10rpx;
						white-space: nowrap;         /* 强制文本不换行 */
						    overflow: hidden;           /* 隐藏溢出部分 */
						    text-overflow: ellipsis;    /* 显示省略号 */
							color: #333;
						.textone {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}

						.texttwo {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							margin-left: 34rpx;
						}
					}
				}
			}

		}
	}

	.selwrap {
		width: 690rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 44rpx;

		.tit {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			padding-top: 32rpx;
			margin-left: 24rpx;
		}

		.main {
			width: 650rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item {
				display: flex;
				flex-direction: column;
				width: 560rpx;
				margin-top: 56rpx;

				.itemtop {
					display: flex;
					align-items: center;

					>image {
						width: 36rpx;
						height: 36rpx;
					}

					>text {
						font-weight: 700;
						font-size: 30rpx;
						color: #3D3D3D;
						margin-left: 20rpx;
					}
				}

				.tip {
					margin-left: 60rpx;
					margin-top: 22rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}

	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>button {
			width: 226rpx;
			height: 80rpx;
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			border: 2rpx solid #FFC300;
			
			font-weight: 400;
			font-size: 36rpx;
			color: #FFC300;
			text-align: center;
			line-height: 80rpx;
			background: #fff;
		}

		.next {
			width: 412rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			/* #ifdef H5||MP-WEIXIN */
			margin-right: 40rpx;
			/* #endif */
			
		}
	}

	.imgwrap {
		width: 690rpx;
		// height: 470rpx;
		padding-bottom: 40rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.tit {
		font-weight: 700;
		font-size: 30rpx;
		color: #3D3D3D;
		padding-top: 36rpx;
		margin-left: 24rpx;
	}

	.up {
		display: flex;

		margin-left: 20rpx;
		margin-top: 32rpx;
	}

	.tip {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		margin-left: 24rpx;
		margin-top: 46rpx;
	}
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		height: 406rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	
	
	}
	
	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}
	
	.popup-center {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;
	
		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}
	
	.btns {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.ipt {
		width: 660rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	
		.textarea {
			width: 660rpx;
			height: 240rpx;
			margin: 0 auto;
			border: none !important;
		}
	}
	.order_sn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 650rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		.orderight{
			display: flex;
			align-items: center;
			>image{
				width: 26rpx;
				height: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
	/* #ifdef MP-WEIXIN */
	.u-border{
		border: none;
	}
	.file-picker__box-content{
		margin-top: 30rpx !important;
		margin-left: 20rpx !important;
	}
	/* #endif */
	
	/* #ifdef MP-ALIPAY */
	/deep/ .u-textarea{
		border: none!important;
	}
	/deep/ .uni-file-picker {
		display: flex;
		margin-left: 20rpx;
		margin-top: 32rpx;
	}
	/* #endif */
</style>